<template>
	<view class="wanl-money">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text
				slot="content"
				style="color: #000; width: 100%;padding-left: 20rpx;"
			>
				生成二维码
			</text>
		</wanl-navbar>
		<view class="cu-list menu-avatar">
			<view class="money" style="font-weight: bold">
				<t<text style="color: #fff;font-size:52rpx">¥</text>
				<text style="margin-left: 20rpx;font-size:68rpx;color: #fff;">{{ money }}</text>
			</view>
			<view class="titles">充值金元宝:{{ yuanbao_num }}个</view>
			<view class="erweimaContent">
<!--				{{$wanlshop.oss(imgurl,50,50)}}-->
				<image style="width: 50vw;height: 50vw;border: 20rpx solid #f39a97;" :src="imgurl"></image>
			</view>
			<view class="edgeInsetBottom"  @touchstart="longPress" @touchend="cancelLongPress">
				长按图片保存至相册并打开神话app支付
			</view>
			<view class="edgeInsetBottom"  @click="apliyPay">
				保存至相册后点击进行支付宝支付
			</view>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			imgurl:'',
			order_id:'',
			user_id:'',
			money:'',
			yuanbao_num:'',
			isLongPress: false, // 是否长按
			timeout: null, // 计时器
			baseurl:'',
			paydata:''
		};
	},
	computed: {
	
	},
	onLoad(option) {
		this.imgurl = option.path;
		this.order_id = option.order_id;
		this.user_id = option.user_id;
		this.money = option.money;
		this.yuanbao_num = option.yuanbao_num;
		if(option.payData){
			this.paydata = option.payData
		}
		console.log("===path",this.imgurl)
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/pay/moneyLog',
				method: 'POST',
				data: {
					page: this.current_page
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		longPress() {
			this.timeout = setTimeout(() => {
				this.isLongPress = true;
				// 执行保存图片的操作
				this.saveImage();
			}, 500); // 设置长按的阈值为500毫秒
		},
		cancelLongPress() {
			clearTimeout(this.timeout);
			this.isLongPress = false;
		},
		saveImage() {
			if (this.isLongPress) {
				//
				// uni.saveImageToPhotosAlbum({
				// 	filePath: 'your-image-url.jpg', // 图片的本地路径或网络路径
				// 	success: () => {
				// 		uni.showToast({title: '保存成功'});
				// 	},
				// 	fail   : () => {
				// 		uni.showToast({title: '保存失败', icon: 'none'});
				// 	}
				// });
				
				// #ifdef H5
				var that = this;
				let image = new Image();
				console.log("===下载图片")
				debugger
				// 解决跨域 Canvas 污染问题
				image.setAttribute("crossOrigin", "anonymous");
				image.onload = function () {
					let canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					let context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
					that.baseurl = url;
					let a = document.createElement("a"); // 生成一个a元素
					let event = new MouseEvent("click"); // 创建一个单击事件
					a.download = that.imgurl; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = that.baseurl;
				// #endif
				
			}
		},
		saveImages() {
			// 获取图片地址
			const imageUrl = this.imgurl;
			// 创建图片
			const image = new Image();
			image.src = imageUrl;
			
			// 图片加载完成后下载
			image.onload = () => {
				const canvas = document.createElement('canvas');
				canvas.width = image.width;
				canvas.height = image.height;
				const ctx = canvas.getContext('2d');
				ctx.drawImage(image, 0, 0);
				
				// 转换为base64格式
				const base64 = canvas.toDataURL('image/png');
				
				// 将base64转换为文件对象
				const parts = base64.split(';base64,');
				const contentType = parts[0].split(':')[1];
				const raw = window.atob(parts[1]);
				const rawLength = raw.length;
				const uInt8Array = new Uint8Array(rawLength);
				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i);
				}
				const blob = new Blob([uInt8Array], { type: contentType });
				blob.lastModifiedDate = new Date();
				blob.name = 'image.png';
				
				// 保存图片到系统相册
				uni.saveImageToPhotosAlbum({
					filePath: blob,
					success() {
						uni.showToast({
							title: '图片保存成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail(err) {
						console.log('保存失败：', err);
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						});
					}
				});
			};
		},
		apliyPay(){
			uni.navigateTo({
				url:`alipay?url=${encodeURIComponent(this.paydata)}`
			})
		}
	}
};
</script>

<style>
page{
	overflow: hidden;
}
.menu-avatar{
	border: 0.5rpx solid transparent;
	width: 100%;
	height: 95vh;
	background: #f6332c url(https://d-shenhuashop.bigchun.com/h5test/yuanbao/erweima/erweimaBg.png) no-repeat center;
	background-size: 100%;
	background-position-y:60px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	.edgeInsetBottom{
		width: 88vw;
		height: 120rpx;
		background: url("https://d-shenhuashop.bigchun.com/h5test/yuanbao/erweima/erweimaBtn.png") no-repeat center;
		background-size: 100%;
		margin: 100rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
	}
	.erweimaContent{
		margin: 60rpx auto 18rpx;
	}
	.money{
		margin: 120rpx auto 50rpx;
	}
	.titles{
		margin: 0 auto 20rpx;
		color:#fff;
		font-size: 38rpx;
	}
}
</style>
